<template>
    <div class="video-desc" id="videoDesc" v-show="descFlag">
        <div class="logo-pic">
            <!-- <span class="logo-white"></span> -->
            <img :src="indexLogoUponVideo" class="logo-white">
        </div>
        <div class="video-loading">
            <div>
                <!-- <span>致力于输出优质的视觉创意作品</span> -->
                <img :src="videoCnWords">
            </div>
            <div class="loading-line">
                <div class="point"></div>
            </div>
            <div>
                <!-- <span>Committed to output high-quality visual creative works</span> -->
                <img :src="videoEnWords">
            </div>
        </div>
        <div class="play">
            <span class="pointer" @click="play">Play now</span>
        </div>
    </div>
</template>
<script>

import indexLogoUponVideo from '@/assets/images/logo-white.png';
import videoCnWords from '@/assets/images/video_cn_words.png';
import videoEnWords from '@/assets/images/video_en_words.png';

export default {
    name: 'videoDesc',
    data() {
        return {
            descFlag: true,
            indexLogoUponVideo:indexLogoUponVideo,
            videoCnWords: videoCnWords,
            videoEnWords: videoEnWords
        }
    },
    methods: {
        play() {
            this.descFlag = false
            this.$emit('play')
        },
        pause() {
            this.descFlag = true
        }
    }
}
</script>
<style lang="less" scoped>
.video-desc {
    position: absolute;
    top: 48.6%;
    left: 43.7%;
    width: 5.4rem;
    height: 4rem;
    margin-top: -2rem;
    margin-left: -1.5rem;
    div {
        word-wrap:break-word;
        word-break:break-all;
        font-size: .25rem;
        color: #ffffff;
    }
    .logo-pic {
        text-align: center;
    }
    .video-loading {
        margin: 25% 0 45% 0;
    }
    .loading-line {
        position: relative;
        background-color: #ffffff;
        height: 2px;
        width: 90%;
        margin: .2% 0 3% 0%;
        .point {
            position: absolute;
            width: .5rem;
            height: 2px;
            background-color: #f00;
            border-radius: 2px;
            animation: move 3s infinite linear;
        }
        @keyframes move {
          0% {
            left: 0;
          }
          100% {
            left: 84%;
          }
        }
    }
    .play {
        text-align: center;
        span {
            border: 1px solid #e71f19;
            padding: 0 .35rem;
            padding-top:0.07rem;
            padding-bottom:0.07rem;
            font-size:0.2rem;
            border-radius: 3px;
        }
        // span:hover {
            // background-color: #ecf5ff;
            // border-color: #fbc4c4;
        // }
    }

    .logo-white{
        width:30%;
    }
}

.video-loading div img{
    width:90%;
    text-align: center;
}

@media screen and (min-width:1200px){
    #videoDesc {
        .video-loading {
            margin: 17.5% 0 27% 9.5%;
        }
    }


}
@media screen and (min-width: 960px) and (max-width: 1199px) {
    #videoDesc {
        .video-loading {
            margin: 20% 0 35% 0;
        }
    }
}
@media screen and (min-width: 768px) and (max-width: 959px) {
    #videoDesc {
        .video-loading {
            margin: 18% 0 30% 0;
        }
    }
}
@media screen and (max-width: 768px) {
    #videoDesc {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 2rem;
        height: 2rem;
        margin-top: -1rem;
        margin-left: -1rem;
        div {
            font-size: .12rem;
        }
        .video-loading {
            margin: 12% 0 24% 0;
        }
    }

    .logo-white{
        width:80%;
    }
}
</style>